<template>
  <div class="body">
    <div class="table-wrap">
      <div class="search_header">
        <div class="search_header_left">
          <el-button
            icon="el-icon-plus"
            @click="assetAdd"
            v-has="'assetsManagement:add'"
            >新增
          </el-button>
          <el-button
            v-has="'assetsManagement:delete'"
            icon="el-icon-minus"
            @click="assetDelete"
            >删除
          </el-button>
        </div>

        <!-- <el-button
          @click='assetSave'
        >保存
        </el-button
        > -->
        <div class="search_header_right">
          <el-input
            placeholder="请输入模型id"
            v-model="parameter.sourceName"
            clearable
          >
            <span
              @click="search"
              slot="suffix"
              style="display: inline-block"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
          <el-select
            placeholder="BIM类型"
            v-model="parameter.bimType"
            clearable
            @change="search"
          >
            <el-option
              v-for="item in bimOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            placeholder="资产状态"
            v-model="parameter.isConfigure"
            clearable
            @change="search"
          >
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!--      <div class='assets_info_control'>-->
      <!--        <i-->
      <!--          title='删除选中'-->
      <!--          @click.stop='assetDelete'-->
      <!--          class='el-icon-delete'-->
      <!--          style='-->
      <!--                          font-size: 24px;-->
      <!--                          float: right;-->
      <!--                          margin-right: 20px;-->
      <!--                          color: #ff5b5b;-->
      <!--                          line-height: 36px;-->
      <!--                        '-->
      <!--        ></i>-->
      <!--        <i-->
      <!--          title='全部保存'-->
      <!--          @click.stop='assetSave'-->
      <!--          class='el-icon-folder'-->
      <!--          style='-->
      <!--                          font-size: 24px;-->
      <!--                          float: right;-->
      <!--                          margin-right: 10px;-->
      <!--                          color: #00baff;-->
      <!--                          line-height: 36px;-->
      <!--                        '-->
      <!--        ></i>-->
      <!--        <i-->
      <!--          title='新增数据'-->
      <!--          @click.stop='assetAdd'-->
      <!--          class='el-icon-circle-plus-outline'-->
      <!--          style='-->
      <!--                          font-size: 24px;-->
      <!--                          float: right;-->
      <!--                          margin-right: 10px;-->
      <!--                          color: #00baff;-->
      <!--                          line-height: 36px;-->
      <!--                        '-->
      <!--        ></i>-->

      <!--      </div>-->
      <el-table
        :data="dataList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        :row-class-name="tableRowClassName"
        @selection-change="assetsTableChange"
      >
        <el-table-column
          width="70"
          type="selection"
          header-show="false"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          width="70"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="模型id"
          width="160"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sourceName"
              oninput="value=value.replace(/[^\w\.\/]/ig, '')"
              @input="assetSave(scope.row)"
              placeholder=""
            />
          </template>
        </el-table-column>
        <el-table-column
          label="BIM类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-select
              @change="assetSave(scope.row)"
              :disabled="scope.row.isConfigure === 1"
              v-model="scope.row.bimType"
              placeholder="请选择BIM类型"
            >
              <!--                       v-if='scope.row.isConfigure !== 1'-->
              <el-option
                v-for="item in bimOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                {{ item.label }}
              </el-option>
            </el-select>
            <!--            <label v-else>{{ scope.row.bimType === 1 ? '楼栋' : scope.row.bimType === 2 ? '管廊' : '其他' }}</label>-->
          </template>
        </el-table-column>
        <el-table-column
          label="挂载时间"
          prop="createTime"
          show-overflow-tooltip
        />
        <el-table-column label="数据资产状态">
          <template v-slot="scope">
            {{
              scope.row.isConfigure === 1
                ? '已配置'
                : '未配置'
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template v-slot="scope">
            <el-button
              v-has="'assetsManagement:edit'"
              @click="dataConfiguration(scope.row)"
              type="text"
              style="color: #00baff; font-weight: 400"
              >数据配置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  assetsList,
  assetsAdd,
  assetsDelete,
  assetsEdit
} from '@/api/assets'
import Icon from '@/components/icon'

let timer

export default {
  name: 'index',
  components: {
    Icon
  },
  data() {
    return {
      dataList: [],
      total: 0,
      parameter: {
        sourceName: '',
        bimType: '',
        isConfigure: '',
        pageSize: 10,
        pageIndex: 1
      },
      stateOptions: [
        {
          label: '已配置',
          value: 1
        },
        {
          label: '未配置',
          value: 0
        }
      ],
      bimOptions: [
        {
          label: '楼栋',
          value: 1
        },
        {
          label: '管廊',
          value: 2
        },
        {
          label: '其他',
          value: 3
        }
      ],
      selectTableList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    assetAdd() {
      // 生成随机的字符串
      const str =
        '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let result = ''
      for (let i = 12; i > 0; --i) {
        result +=
          str[Math.floor(Math.random() * str.length)]
      }
      assetsAdd([
        {
          sourceName: result,
          bimType: '3'
        }
      ]).then((res) => {
        console.log(res)
        this.getList()
      })
    },
    assetDelete() {
      const ids = []
      if (this.selectTableList.length) {
        this.selectTableList.forEach((res) => {
          ids.push(res.pkid)
        })
        assetsDelete(ids).then(() => {
          this.getList()
        })
      } else {
        this.$message.info('请选择要删除的数据资产')
      }
    },
    assetsTableChange(val) {
      this.selectTableList = val
    },
    assetSave(data) {
      // console.log(this.dataList)
      const list = [data]
      console.log('执行debounce')
      if (timer !== null) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => this.saveFunc(list), 800)
    },
    saveFunc(list) {
      assetsEdit(list).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success('更新数据成功')
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    search() {
      this.parameter.pageIndex = 1
      this.total = ''
      this.getList()
    },
    // pageChange
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    getList() {
      console.log(this.parameter)
      assetsList(this.parameter).then((res) => {
        if (res.success) {
          this.dataList = res.data.list
          this.total = res.data.count
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // tanble row
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    dataConfiguration(row) {
      // console.log(row)
      localStorage.setItem(
        'modelInfoAssetSetting',
        JSON.stringify(row)
      )
      this.$router.push({
        path: '/mochaITOM/assetsManagement/assetAllocation'
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/table.scss';
</style>
